<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团购商品详情</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
    <!-- 商品图片轮播区域 -->
    <div class="product-carousel">
        <div class="carousel-container">
            <div class="carousel-track" id="carouselTrack">
                <!-- 轮播项将通过JS动态生成 -->
            </div>
            <div class="carousel-indicators" id="carouselIndicators"></div>
        </div>
    </div>

    <!-- 商品信息区域 -->
    <div class="product-info">
        <h1 class="product-title" id="productTitle">加载中...</h1>
        <div class="price-section">
            <div class="price-wrapper">
                <span class="discount-price" id="discountPrice">¥0.00</span>
                <span class="original-price" id="originalPrice">¥0.00</span>
            </div>
            <div class="login-tip" id="loginTip" style="display: none;">
                用户未登录，<a href="./login.html" class="login-link">登录</a>后获取优惠价格
            </div>
        </div>
    </div>

    <!-- 团购列表区域 -->
    <div class="group-buy-section" id="groupBuySection" style="display: none;">
        <div style="text-align: center; padding: 20px; color: #999;">加载中...</div>
    </div>

    <!-- 底部购买按钮 -->
    <div class="bottom-actions">
        <button class="buy-alone-btn" id="buyAloneBtn">单独购买</button>
        <button class="buy-group-btn" id="buyGroupBtn" style="display: none;">拼团购买</button>
    </div>
</div>

<!-- 支付弹窗 -->
<div class="payment-modal" id="paymentModal">
    <div class="modal-overlay" id="modalOverlay"></div>
    <div class="modal-content">
        <h2 class="modal-title">订单支付</h2>
        <p class="payment-amount">支付金额 <span id="paymentAmount">0</span>元</p>
        <div class="sandbox-info">
            测试账号：pyedge9188@sandbox.com<br>
            密码：111111<br>
            支付：111111
        </div>
        <div class="modal-actions">
            <button class="confirm-btn" id="confirmPaymentBtn">确定</button>
        </div>
    </div>
</div>

<script src="js/index.js"></script>
</body>
</html>
